<template>
  <div class="demo">
    <Radio.Group v-model:value="componentSize">
      <Radio.Button value="small">Small</Radio.Button>
      <Radio.Button value="middle">Middle</Radio.Button>
      <Radio.Button value="large">Large</Radio.Button>
    </Radio.Group>
    <Divider />
    <ConfigProvider :component-size="componentSize">
      <div class="example">
        <Input />
      </div>
      <div class="example">
        <Tabs>
          <Tabs.TabPane key="1" tab="Tab 1">Content of Tab Pane 1</Tabs.TabPane>
          <Tabs.TabPane key="2" tab="Tab 2">Content of Tab Pane 2</Tabs.TabPane>
          <Tabs.TabPane key="3" tab="Tab 3">Content of Tab Pane 3</Tabs.TabPane>
        </Tabs>
      </div>
      <div class="example">
        <Input.Search allow-clear />
      </div>
      <div class="example">
        <Input.TextArea allow-clear />
      </div>
      <div class="example">
        <Select style="width: 100px" placeholder="select value" :options="[{ value: 'demo' }]" />
      </div>
      <div class="example">
        <DatePicker />
      </div>
      <div class="example">
        <DatePicker.RangePicker />
      </div>
      <div class="example">
        <Button>Button</Button>
      </div>
      <div class="example">
        <Card title="Card">
          <Table :columns="columns" :data-source="dataSource" />
        </Card>
      </div>
    </ConfigProvider>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Card from '@sscd/card';
  import DatePicker from '@sscd/date-picker';
  import Input from '@sscd/input';
  import Radio from '@sscd/radio';
  import Select from '@sscd/select';
  import Table from '@sscd/table';
  import Tabs from '@sscd/tabs';
  import ConfigProvider from '@sscd/config-provider';
  const componentSize = ref('small');
  const columns = [
    { title: 'Name', dataIndex: 'name' },
    { title: 'Age', dataIndex: 'age' },
  ];
  const dataSource = [
    { key: '1', name: 'John Brown', age: 32 },
    { key: '2', name: 'Jim Green', age: 42 },
    { key: '3', name: 'Joe Black', age: 32 },
  ];
</script>
<style lang="less" scoped>
  .demo {
    .example {
      margin: 16px 0;
    }
  }
</style>